<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
    1. 新的语义化元素：main、footer、header、nav、section
      header 头部
      main 主要内容
      footer 底部
      nav 导航
      section 一块内容

      语义化是什么？有什么用？
        有利于SEO，代码更加规范和可读

      SEO是搜索引擎优化：提升网站在搜索引擎排名
        meta description / keyword 
        服务端渲染技术 SSR （react - next / vue - nuxt）

    2. 新的表单控件：date、time、email、url、search
      实际开发中不用，样式太丑，不好修改
    3. 新的 API：
    ● 音视频：audio 和 video 元素
    ● 绘图图形：canvas 元素
      画布，用来绘制图形图表 - 数据可视化 echarts - 数据大屏展示/适配/实时更新
    ● 本地存储：localStorage，sessionStorage
      它们的区别：
        localStorage 永久存储
          token 用户唯一标识
        sessionStorage 临时会话存储（关闭浏览器会自动清空内容）

      浏览器本地存储方案：
        cookie 
          储存体积小（4KB）
          发送请求，cookie会自动携带

        webStorage 
          储存体积更大（2mb）
          必须手动携带（封装axios中请求拦截器在请求头中携带token参数）

        通过chrome开发者工具的application板块可知，还有其他存储方案：
          IndexedDB
          WebSQL

    ● 多线程操作：Web Worker
      多线程操作 - 项目性能优化

      要求：
        1. 能够背诵各种点
        2. 至少引申一个点
   -->
    <input type="text" />
    <input type="radio" />
    <input type="checkbox" />

    <input type="date" />
    <input type="time" />

    <video src="./1.mp4" controls></video>
  </body>
</html>
